<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微票儿</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        @media all and (max-width:768px) {
            .carouselDiv {
                margin-top: 10px;
            }

            .preference {
                background: white;
                padding: 0px 30px;
                display: inline-block;
                margin-top: 10px;
            }
        }
    </style>
</head>

<body>
    <!-- 导航条 -->
    <div class=" header">
        <nav class="navbar navbar-inverse " role="navigation">
            <div class=" container">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"> <img class="imgLogo" src="image/logoMsg.png" alt=""></a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">全国</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    演出 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">演出票</a></li>
                                    <li><a href="#">场馆</a></li>
                                </ul>
                            </li>
                            <li><a href="#">电影</a></li>
                            <li><a href="#">我的微票儿</a></li>
                            <li class="newBtn"><button class="btn btn-danger btn-xs">new</button></li>
                        </ul>
                        <!-- 搜索框 -->
                        <form action="" class="navbar-form navbar-right">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="请输入要搜索的内容">
                                <button class="btn btn-default">搜索</button>
                            </div>
                            <div class="floatSpan"><span>登录</span> <span>注册</span></div>
                        </form>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <!-- 轮播图 -->
    <div class="content">
        <!-- 左边部分 -->
        <div class="carouselDiv col-md-7">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="image/1.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="image/2.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="image/3.jpg"" alt=" Third slide">
                    </div>
                    <div class="item">
                        <img src="image/4.jpg"" alt=" Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3=""
                        aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span _ngcontent-c3=""
                        aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- 右边部分 -->
        <div class="col-md-4 col-md-offset-1">
            <div class="preference">
                <h2>特惠看</h2>
                <p><img src="image/img1.jpg" alt=""></p>
                <ul>
                    <li>[苏州]2016迷笛电子音乐节(预售)</li>
                    <li>穿着花裤子喝着小酒通宵达旦</li>
                    <li>------------------------------</li>
                    <li>2016刘若英世界巡回演唱会</li>
                    <li>[上海]百老汇经典音乐剧--《狮子王》</li>
                </ul>
            </div>
        </div>
    </div>
    <div>
    <!-- 首页技能课 -->
    <div class="section1">
        <!-- 第一部分 -->
        <div class="first">
            <div class="skill">
                <div class="col-md-2">
                    <p><img src="image/5.jpg" alt=""></p>
                    <p>[上海]百老汇经典音乐剧《狮子王》</p>
                </div>
                <div class="col-md-2">
                    <p><img src="image/6.jpg" alt=""></p>
                    <p>[北京]陈奕迅ANOTHEREASON'S LIFE演唱会北京站</p>
                </div>
                <div class="col-md-2">
                    <p><img src="image/7.jpg" alt=""></p>
                    <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                </div>
                <div class="col-md-2">
                    <p><img src="image/8.jpg" alt=""></p>
                    <p>[北京]BJCC北京漫控潮流博览会</p>
                </div>

                <div class="col-md-3">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#page" data-toggle="tab">首页</a></li>
                        <li><a href="#skillClass" data-toggle="tab">技能课</a></li>
                    </ul>
                    <div class=" section tab-content">
                        <div class="tab-pane fade in active" id="page">
                            <p><img src="image/img2.jpg" alt=""></p>
                            <ul>
                                <li>斯诺登再曝绝密 美暗中攻击他们</li>
                                <li>--------------------------</li>
                                <li>中国使必杀一招 美在南海投降了</li>
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="skillClass">
                            <p><img src="image/img3.jpg" alt=""></p>
                            <ul>
                                <li>斯诺登再曝绝密 美暗中攻击他们</li>
                                <li>菲对比中菲军力 曝结果令其绝望</li>
                                <li>中国使必杀一招 美在南海投降了</li>
                                <li>红旗9突然撤下永兴岛 绝密曝光</li>
                                <li>张召忠对南海霸气表态 美日胆寒</li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="second">
            <div class="col-md-12">
                <img src="image/ad1.jpg" alt="">
            </div>
        </div>
        <!-- 第三部分 -->
        <div class="second-item">
            <div class="second-item-left col-md-9 col-xs-12">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="" data-toggle="tab">演唱会</a></li>
                    <li><a href="" data-toggle="tab">体育赛事</a></li>
                    <li><a href="" data-toggle="tab">舞台剧</a></li>
                    <li><a href="" data-toggle="tab">儿童亲子</a></li>
                    <li><a href="" data-toggle="tab">音乐会</a></li>
                    <li><a href="" data-toggle="tab">展览活动</a></li>
                </ul>
                <div class="tab-content">
                    <div class="row">
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/9.jpg" alt="">
                                <p>[苏州]2016迷笛电子音乐节</p>
                                <p><span class="price">180</span>元起</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/10.jpg" alt="">
                                <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                                <p><span class="price">180</span>元起</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/11.jpg" alt="">
                                <p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                                <p><span class="price">380</span>元起</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/12.jpg" alt="">
                                <p>[青岛]周杰伦2016世界巡回演唱会青岛站(即将开售)</p>
                                <p><span class="price">380</span>元起</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/13.jpg" alt="">
                                <p>[太原]周杰伦2016世界巡回演唱会太原站(预售) 280元起</p>
                                <p><span class="price">380</span>元起</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/14.jpg" alt="">
                                <p>[太原]2016 李荣浩「有 理想」世界巡回演唱会-太原站</p>
                                <p><span class="price">280</span>元起</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/15.jpg" alt="">
                                <p>[深圳]徐佳莹“日全蚀”深圳演唱会</p>
                                <p><span class="price">280</span>元起</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <div class="thumbnail item">
                                <img src="image/16.jpg" alt="">
                                <p>[太原]2016刘若英"Renext 我敢"世界巡回演唱会太原站</p>
                                <p><span class="price">380</span>元起</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="second-item-right col-md-3 col-xs-12">
                <div class="right-header">
                    <h4>历历在目<span>- 尽享每天不一样的精彩</span></h4>
                </div>
                <h5>今天共<span class="price"> 9 </span>场演出</h5>
                <div class="right-item clear">
                    <img src="image/img4.jpg" alt="">
                    <h5>[天津]天津中华曲苑相声专场</h5>
                    <p>2016年1月1日~12月31日 天津中华曲苑</p>
                    <p><span class="price"> 50 </span>元起</p>
                </div>
                <div class="right-item clear">
                    <img src="image/img5.jpg" alt="">
                    <h5>[深圳]刘老根大舞台深圳站</h5>
                    <p>2016年3月18日~5月31日 深圳刘老根大舞台</p>
                    <p><span class="price"> 120 </span>元起</p>
                </div>
                <div class="right-item clear">
                    <img src="image/img6.gif" alt="">
                    <h5>[长沙]大兵笑工场相声晚会</h5>
                    <p>2016年4月18日~6月27日 湘江剧院</p>
                    <p><span class="price"> 40 </span>元起</p>
                </div>
                <div class="right-item clear">
                    <img src="image/img4.jpg" alt="">
                    <h5>[天津]天津中华曲苑相声专场</h5>
                    <p>2016年1月1日~12月31日 天津中华曲苑</p>
                    <p><span class="price"> 50 </span>元起</p>
                </div>
                <p class="more-show"><a href="">查看今日全部演出</a></p>
            </div>
        </div>
        <!-- 第四部分 -->
        <div class="third-item">
            <div class="third-item-left col-md-9">
                <div class="left-header row">
                    <h3 class="col-md-4 col-xs-6">场馆推荐</h3>
                    <a href="" class="col-md-2 col-md-push-6 col-xs-6 text-right">全部场馆</a>
                </div>
                <div class="left-body row">
                    <div class="col-md-6">
                        <div class="thumbnail">
                            <img src="image/img7.jpg" alt="">
                            <div class="text">
                                <h3>近期演出:</h3>
                                <p>[北京]恒源祥戏剧出品大型原创音乐剧《犹太人在上海》</p>
                                <p>[北京]沪语话剧《永远的尹雪艳》</p>
                                <p>[北京]恒源祥戏剧出品原创话剧《大商海》</p>
                                <p>[北京]百老汇经典音乐剧《音乐之声》中文版</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="thumbnail">
                            <img src="image/img8.jpg" alt="">
                            <div class="text">
                                <h3>近期演出:</h3>
                                <p>[北京]2016如果 田馥甄巡回演唱会PLUS北京站(售罄)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="third-item-right col-md-3">
                <h4>热销榜单</h4>
                <div class="right-item clear">
                    <img src="image/img9.jpg" alt="">
                    <h5>[上海]百老汇经典音乐剧《狮子王》</h5>
                    <p>2016年1月1日~12月31日 [华特迪士尼大剧院]</p>
                    <p><span class="price"> 190 </span>元起</p>
                </div>
                <div class="text">
                    <p>[北京]陈奕迅 ANOTHER EASON'S LIFE</p>
                    <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                    <p>[北京]BJCC北京漫控潮流博览会</p>
                    <p>[贵阳]陈奕迅 ANOTHER EASON'S LIFE演唱会贵阳站</p>
                    <p>[太原]2016岳云鹏相声专场太原站</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="clear footer-item">
                        <div class="footer-icon">
                            <img src="image/footer_logo.png" alt="">
                        </div>
                        <h3>微信电影票官网</h3>
                        <p>在线占好座，覆盖影院全国第一</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="clear footer-item">
                        <div class="footer-icon">
                            <img src="image/phoneIcon.png" alt="">
                        </div>
                        <h3>微信电影票官网</h3>
                        <p>在线占好座，覆盖影院全国第一</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="clear footer-item">
                        <div class="footer-icon">
                            <img src="image/f_wx.png" alt="">
                            <img src="image/f_wpr.png" alt="">
                        </div>
                        <h3>微信电影票官网</h3>
                        <p>在线占好座，覆盖影院全国第一</p>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <p>@2015北京微影时代科技有限公司版权所有　　京ICP备14034406号-2</p>
            </div>
        </div>
    </div>
    


</body>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>

</html>